<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>fireworks</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <canvas id="fireworks"></canvas>
    
    <div class="controls">
        <div class="frequency-control">
            <label for="frequency-slider">烟花频率</label>
            <input type="range" id="frequency-slider" min="100" max="2000" value="700" step="100">
            <span id="frequency-value">中等</span>
        </div>

        <div class="text-control">
            <div class="text-input-group">
                <input type="text" id="firework-text" placeholder="输入烟花文字">
                <button id="add-text">添加</button>
            </div>
            
            <div class="text-options">
                <div class="option-group">
                    <label for="text-size">文字大小</label>
                    <input type="range" id="text-size" min="20" max="100" value="40">
                </div>
                
                <div class="option-group">
                    <label for="text-color">文字颜色</label>
                    <input type="color" id="text-color" value="#ffffff">
                </div>

                <div class="option-group">
                    <label for="text-effect">动画效果</label>
                    <select id="text-effect">
                        <option value="fade">渐现</option>
                        <option value="scatter">散开</option>
                        <option value="rotate">旋转</option>
                    </select>
                </div>
            </div>

            <div class="text-templates">
                <button data-text="新年快乐">新年快乐</button>
                <button data-text="生日快乐">生日快乐</button>
                <button data-text="恭喜发财">恭喜发财</button>
            </div>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>
